<template>
  <div class="courseData">

    <!--评价反馈-->
    <!--
        closable 是否右上角有 x
        mask-closable 点击遮罩关闭
        draggable 允许拖拽
    -->
    <Drawer title="评价反馈"
            :closable="true"
            :mask-closable="false"
            transfer
            :draggable="true"
            width="300"
            v-model="evaluateFlag">
      <div slot="header" class="slot-header">
        评价反馈
      </div>
      <div slot="close" style="color: #FF0000;font-size: 30px;margin:-10px 10px 0px 0px">
        ×
      </div>

      <div class="drawer-score">
        <div class="text">本课时平均评分：</div>
        <div class="score">
          {{courseDetails.courseScore}}
        </div>
      </div>

      <div class="drawer-grade">
        <div class="tip">你可以选择 ☆ 为本课时评分</div>
        <div class="notice">评分低于2.5分将发布新视频</div>
        <div class="rate">
          <Rate
            show-text
            v-model="userScore">
            <span style="color: #f5a623">{{userScore}}</span>
          </Rate>
        </div>
      </div>

      <div class="drawer-evaluate">
        <div class="tip">老师发布新视频会听取你的建议哦</div>
        <Input
          clearable
          v-model="evaluate"
          maxlength="200"
          show-word-limit
          type="textarea"
          :autosize="{minRows: 3}"
          :rows="3"/>
      </div>

      <div class="drawer-btn">
        <div class="btn submit">
          <Button type="success" size="default" @click="submitEvaluate()" v-if="submitEvaluateFlag">提交</Button>
          <Button type="default" size="default" v-if="!submitEvaluateFlag">提交</Button>
        </div>

        <div class="btn cancel">
          <Button type="error" size="default" @click="cancelEvaluate()">取消</Button>
        </div>
      </div>
    </Drawer>

    <!--课程资料-->
    <Drawer title="课程资料"
            :closable="true"
            :mask-closable="true"
            transfer
            :draggable="true"
            width="400"
            v-model="getDataFlag">
      <div slot="header" class="slot-header">
        课程资料
      </div>
      <div class="drawer-data" v-for="(obj,i) in courseDataList" @click="openHtmlPage(obj)">
        {{obj.dataName}}
      </div>
    </Drawer>

    <!--课程资料-->
    <Drawer title="笔记讨论"
            :closable="true"
            :mask-closable="true"
            transfer
            :draggable="true"
            width="800"
            v-model="discussFlag">
      <div slot="header" class="slot-header">
        笔记讨论
      </div>
    </Drawer>

  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    props:{
      c:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        //课程id
        courseId: "",
        //课时信息
        course: {
          courseId: "",
          courseName: "",
          subjectId: "",
          chapterId: "",
          showOrder: "",
          status: "",
        },
        //课时详细信息
        courseDetails: {
          courseDetailsId: "",
          courseId: "",
          courseUrl: "",
          courseTime: "",
          courseSize: "",
          courseView: "",
          courseScore: "",
          courseTotal: "",
          status: "",
          vip: ""
        },
        //课时资料
        courseDataList: [],
        //用户评分
        userScore: 5,
        //课时反馈
        evaluate: "",
        //提交反馈幂等
        submitEvaluateFlag: true,
        //评价反馈开关
        evaluateFlag: false,
        //获取资料开关
        getDataFlag: false,
        //笔记讨论开关
        discussFlag: false
      }
    },
    computed: {
      isLogin() {
        return this.Store.getters.getIsLogin;
      },
      userInfo() {
        return this.Store.getters.getUserInfo;
      }
    },
    methods: {
      //反馈取消按钮
      cancelEvaluate: function () {
        this.evaluateFlag = false
      },
      //反馈提交按钮
      submitEvaluate: function () {
        //登录才可提交
        let b = this.isLogin;
        if (!b) {
          this.$Notice.error({
            title: "请登录后评价哦"
          })
          return false;
        }
        //
        if (this.evaluate.trim() == "") {
          this.$Notice.error({
            title: "请填写你的建议反馈"
          })
          return false;
        }
        //提交反馈幂等
        this.submitEvaluateFlag = false
        let courseId = this.course.courseId;
        let userId = this.userInfo.userId;
        let data = {
          //课程评分
          courseScore: this.userScore,
          //课程评价
          courseEvaluate: this.evaluate
        }
        this.axios.post(`/course/evaluate/evaluate/${courseId}/${userId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              this.$Notice.success({
                title: "提交成功"
              })
            }
            this.submitEvaluateFlag = true
            this.evaluateFlag = false
          })
      },
      //打开资料
      openHtmlPage: function (data) {
        let url = data.dataUrl;
        window.open(url, "_blank");
      },
      //获取课时资料列表
      getCourseData: function () {

        this.axios.get(`/course/courseData/courseDataList/${this.courseId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.courseDataList = resp.data.data
            }
          })
      }
    },
    mounted() {
      this.Bus.$on("my-event-course", (data) => {
        this.course = data;
        this.courseId = data.courseId;
        this.courseDetails = this.course.courseDetails;
        if (data.type == 1) {
          this.evaluateFlag = true
        }
        if (data.type == 2) {
          this.getDataFlag = true
          this.getCourseData()
        }
        if (data.type == 3) {
          this.discussFlag = true
        }
      })
    }
  }
</script>

<style scoped>
  /*头部提示*/
  .slot-header {
    font-size: 18px;
    font-weight: bolder;
    color: #FF0000;
  }

  /*评分*/
  .drawer-score {
    height: 50px;
    width: 100%;
    min-width: 256px;
    margin-bottom: 6px;
    /*border-bottom: 1px solid #FF0000;*/
  }

  /*本课时平均得分*/
  .drawer-score .text {
    height: 30px;
    float: left;
    margin-top: 20px;
    font-size: 16px;
    line-height: 30px;
    color: #000000;
    font-family: Arial;
  }

  .drawer-score .score {
    float: left;
    height: 50px;
    margin: 10px;
    font-size: 40px;
    color: #f5a623;
    line-height: 40px;
  }

  /*为本课时打分*/
  .drawer-grade {
    width: 100%;
    min-width: 256px;
    margin-top: 40px;
  }

  .drawer-grade .tip {
    color: #000000;
    font-size: 14px;
    font-family: Arial;
  }

  .drawer-grade .notice {
    font-size: 14px;
    color: #FF0000;
    font-family: Arial;
  }

  .drawer-grade .rate {
    margin-top: 6px;
  }

  /*课时反馈*/
  .drawer-evaluate {
    margin-top: 40px;
  }

  .drawer-evaluate .tip {
    color: #000000;
    font-size: 14px;
    font-family: Arial;
  }

  /*按钮*/
  .drawer-btn {
    margin-top: 240px;
  }

  .drawer-btn .btn {
    float: right;
    margin-right: 20px;
  }

  /*资料*/
  .drawer-data {
    width: 80%;
    height: 30px;
    border-radius: 4px;
    background-color: #19be6b;
    margin-bottom: 10px;
    font-family: Arial;
    color: #FFF;
    font-size: 16px;
    line-height: 30px;
    padding-left: 12px;
  }
</style>
